<template>
  <el-dialog
    title="配比"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="1200px"
  >

    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="编号"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="值类型">
          <template slot-scope="scope">
            <span type="success" v-if="scope.row.valueType === lotteryValueTypeEnum.none">无奖品</span>
            <span type="success" v-if="scope.row.valueType === lotteryValueTypeEnum.cash">现金</span>
            <span type="success" v-if="scope.row.valueType === lotteryValueTypeEnum.gift">礼品</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          header-align="center"
          align="center"
          label="显示文本"
        >
        </el-table-column>
        <el-table-column
          prop="value"
          header-align="center"
          align="center"
          label="抽奖值">
        </el-table-column>

        <el-table-column
          :prop="`percent${index + 1}`"
          header-align="center"
          align="center"
          :label="`${index + 1}抽`"
          v-for="(col, index) in colsCount"
          :key="index">

          <template slot-scope="{row}">
            <el-input v-model="row[`percent${index + 1}`]" placeholder="请输入比例至"></el-input>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确定</el-button
      >
    </span>
  </el-dialog>

</template>

<script>
import { getObj} from "@/api/shop_operate/lottery";
import { getPercentListByLotteryId, updatePercent} from '@/api/shop_operate/lottery_percent';
import {lotteryTypeEnum, lotteryCateEnum,lotteryExchangeCateEnum, lotteryValueTypeEnum} from '@/const/const'

export default{
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },

  data() {
    return{
      // 抽奖方式
      lotteryCateEnum,
      // 抽奖兑换方式
      lotteryExchangeCateEnum,
      // 抽奖类型
      lotteryTypeEnum,
      // 抽奖值类型
      lotteryValueTypeEnum,
      canSubmit: false,
      lotteryInfo:{},
      lotteryPercentList:[],
      dataList:[],
      colsCount:0,
      colList:[],
      dataListLoading:false
    }
  },
  methods:{

    /**
     * 初始化
     */
    init(id){
      this.canSubmit = true
      if(id){
        this.dataListLoading = true
        getObj(id).then(res=>{
          this.lotteryInfo = res.data.data
          getPercentListByLotteryId({
            lotteryId: id
          }).then(res=>{
            this.dataListLoading = false
            this.lotteryPercentList = res.data.data
            this.formatLotteryPercent()
          })
        })
      }
    },

    /**
     * 格式化数据
     */
    formatLotteryPercent(){
      this.lotteryInfo.lotteryDetails.forEach(item=>{
        let data = {
          id: item.id,
          lotteryId: item.lotteryId,
          valueType: item.valueType,
          content: item.content,
          value: item.value
        }
        this.dataList.push(data)
      })
      
      // 获取列的个数
      if(this.lotteryInfo.lotteryType == lotteryTypeEnum.none){
        this.colsCount = 1
      } else {
        this.colsCount = this.lotteryInfo.maxCount
      }

      // 动态生成列
      for(let i = 0; i < this.dataList.length; i++){
        let item = this.dataList[i]
        for(let j = 1; j <= this.colsCount; j++){
          let arr = this.lotteryPercentList.filter(p=>p.lotteryDetailId == item.id && p.level == j)
          if(arr.length > 0){
            this.$set(item, `percent${j}`, arr[0].percent)
          } else {
            this.$set(item, `percent${j}`, '')
          }
        }
      }

      console.log(this.dataList)
    },

    /**
     * 重置表单
     */
    closeDialog() {
      this.$emit('update:visible', false)
    },

    /**
     * 提交
     */
    dataFormSubmit(){
      console.log(this.dataList)
      let submitData = []
      debugger
      for(let i = 0; i<this.dataList.length;i++){
        let lottery = this.dataList[i]
        for(let j = 1; j <= this.colsCount; j++){
          let data = {}
          data.lotteryId = lottery.lotteryId
          data.lotteryDetailId = lottery.id
          data.level = j
          data.percent = lottery[`percent${j}`]
          let arr = this.lotteryPercentList.filter(p=>p.lotteryDetailId == item.id && p.level == j)
          if(arr.length > 0){
            data.id = arr[0].id
          } else {
            data.id = ''
          }
          submitData.push(data)
        }
      }
      console.log(submitData)

      updatePercent(submitData)
      .then((data) => {
        this.$notify.success("操作成功");
        this.$emit("refreshDataList");
        this.closeDialog()
      }).catch(() => {
        this.canSubmit = true;
      });
    }
  }
}
</script>